<header class="flex justify-between items-center mb-4">
  <h1 class="crayons-title">Award Badges</h1>
  <%= link_to "Back to Badge Achievements", admin_badge_achievements_path, class: "c-link c-link--block" %>
</header>
<div class="crayons-card p-6">
  <%= form_with(url: admin_badge_achievements_award_badges_path, local: true, class: "flex flex-col gap-4") do |f| %>
    <div class="crayons-field">
      <%= f.label :badge, "Badge", class: "crayons-field__label" %>
      <%= f.select("badge", @all_badges.map { |badge| [badge.title, badge.slug] }, include_blank: true) %>
    </div>
    <div class="crayons-field">
      <%= f.label :usernames, "Usernames", class: "crayons-field__label" %>
      <p class="crayons-field__description">
        Comma Delimited, All Lowercase, No @ Symbol Required In Front Of Usernames
        Warning: Usernames are case-sensitive and must be all lowercase! This task will fail silently when supplied with incorrect usernames.
      </p>
      <%= f.text_area :usernames, placeholder: "username1, username2, username3", required: true, size: "40x3", class: "crayons-textfield" %>
    </div>
    <div class="crayons-field">
      <%= f.label :message_markdown, "Override Default Message", class: "crayons-field__label" %>
      <p class="crayons-field__description">
        Supports Markdown. This overrides the "message" sent in notifications and emails, it does not override the badge description.
      </p>
      <%= f.text_area :message_markdown, size: "40x3", class: "crayons-textfield" %>
    </div>
    <div class="crayons-field crayons-field--checkbox pb-2 pl-1">
      <%= f.check_box :include_default_description, checked: true %>
      <%= f.label :include_default_description, "Include Default Description", class: "crayons-field__label pt-2" %>
    </div>
    <p class="crayons-field__description">
      If checked, the default badge <em>description</em> will be included above the message. If unchecked, only the message will be included.
    </p>
    <div>
      <%= f.submit "Award Badges", class: "c-btn c-btn--primary" %>
    </div>
  <% end %>
</div>
